<template>
    <div
            class="app-container"
            :element-loading-text="loadingText">
        <!-- 挂号编号的查询条件开始 -->
        <el-form ref="queryForm" label-width="88px">
            <el-form-item label="挂号单ID" prop="regId">
                <el-input
                        v-model="regId"
                        clearable
                        placeholder="请输入挂号单号"
                        size="small"
                        style="width:300px"
                />
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                <!--                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">读取IC卡</el-button>-->
            </el-form-item>
        </el-form>
        <!-- 挂号编号的查询条件结束 -->
        <!-- 挂号输入框下面的所有内容开始 -->
        <div v-if="careHistory.regId!==undefined">
            <!-- 病例信息开始 -->
            <el-card style="margin-bottom: 5px">
                <el-form label-position="right" label-width="120px" inline class="demo-table-expand">
                    <el-form-item label="挂号单号:">
                        <span v-text="careHistory.regId"/>
                    </el-form-item>
                    <el-form-item label="医生姓名:">
                        <span v-text="careHistory.userName"/>
                    </el-form-item>
                    <el-form-item label="科室名称:">
                        <span v-text="careHistory.deptName"/>
                    </el-form-item>
                    <el-form-item label=" 患者姓名:">
                        <span v-text="careHistory.patientName"/>
                    </el-form-item>
                    <el-form-item label="就诊时间:">
                        <span v-text="careHistory.careTime"/>
                    </el-form-item>
                    <el-form-item label="主诉:">
                        <span v-text="careHistory.caseTitle"/>
                    </el-form-item>
                    <el-form-item label="诊断信息:">
                        <span v-text="careHistory.caseResult"/>
                    </el-form-item>
                    <el-form-item label="医生建议:">
                        <span v-text="careHistory.doctorTips"/>
                    </el-form-item>
                </el-form>
            </el-card>
            <!-- 病例信息结束 -->
            <!--             工具按钮开始-->
            <el-card style="margin-bottom: 5px">
                <el-button type="success" icon="el-icon-finished" @click="handleSelectAll">全选</el-button>
                <el-button type="success" icon="el-icon-finished" @click="handleUnSelectAll">取消全选</el-button>
                <el-button type="danger" icon="el-icon-bank-card" @click="queryAll">发药</el-button>
            </el-card>
            <!--             工具结束开始 -->
            <!-- 未支付的处方信息开始 -->
            <el-card style="margin-bottom: 5px">
                <el-collapse v-if="careOrders" v-model="activeNames">
                    <el-collapse-item v-for="(item,index) in careOrders" :key="index" :name="index">
                        <template slot="title">
                            <h1>当前用户需要的药品如下:</h1>
                        </template>
                        <el-table
                                ref="refTable"
                                border
                                :data="item.careOrderItem"
                                :row-class-name="tableRowClassName"
                                @selection-change="handleCareOrderItemSelectionChange($event,item.coId)">
                            <el-table-column type="selection" width="55" align="center" />
                            <el-table-column label="序号" align="center" type="index" width="50" />
                            <el-table-column :label="item.careOrderItem[0].itemType==='0'?'药品名称':'项目名称'" align="center" prop="itemName" />
                            <el-table-column label="数量" align="center" prop="num" />
                            <el-table-column label="单价(元)" align="center" prop="price" />
                            <el-table-column label="金额(元)" align="center" prop="amount" />
                            <el-table-column label="备注" align="center" prop="remark" />
                            <el-table-column label="状态" align="center" prop="status" :formatter="StatusFormat"/>
                        </el-table>
                    </el-collapse-item>
                </el-collapse>
            </el-card>
            <!-- 未支付的处方信息结束 -->
            <!-- 挂号输入框下面的所有内容结束 -->
        </div>
        <div v-else style="text-align:center">请输入正确的挂号单ID查询</div>
    </div>
</template>

<script>
    export default {
        name: "",
        data() {
            return {
                regId: undefined,
                //病例集合
                careHistory:{},
                // 状态名
                loadingText:'',
                //处方信息
                careOrders:[],
                //展开折叠板的名字
                activeNames:[],
                //当前选中的所有集合项目
                itemObjs:[],
                careOrderItems:[],
                allAmount:0.00,

                statusOptions:[],
            }
        },
        created(){
            this.initStatus();
        },
        methods: {
            handleQuery() {
                if (this.regId===''){
                    this.$message.error('请输入挂号单ID');
                    this.resetCurrentParams();
                    return
                }
                this.careHistory={};
                this.careOrderItem=[];
                this.itemObjs = [];
                this.allAmount=0;
                this.$axios.get('/charge/api/BackFeeItemUserId/' + this.regId).then(result => {
                    this.careHistory = result.data.data.careHistory;
                    this.careOrders=result.data.data.list;
                    this.loadingText = ''
                    this.careOrders.filter((c,index)=>{
                        this.activeNames.push(index)
                    })
                })
            },

            initStatus(){
                this.$axios.get("/charge/api/item/findAllByType/his_order_details_status").then(result => {
                    this.statusOptions = result.data.data;
                })
            },

            StatusFormat(row){
                let s = row.status;
                return this.formatDict(this.statusOptions, s);
            },

            handleCareOrderItemSelectionChange(selection,coId){
                if (this.itemObjs.length === 0) {
                    this.itemObjs = selection
                } else {
                    for (let i = 0; i < this.itemObjs.length; i++) {
                        const obj = this.itemObjs[i]
                        if (obj.coId === coId) {
                            this.itemObjs.splice(i, 1)
                            i--
                        }
                    }
                    // 最后再来添加
                    selection.filter(newItem => {
                        this.itemObjs.push(newItem)
                    })
                }
                // 调用计算选中的总额
                this.computeAllAmount()
            },

            tableRowClassName({row,rowIndex}){
                row.index = rowIndex
            },
            // //计算选中的总额
            computeAllAmount() {
                this.allAmount = 0
                this.itemObjs.filter(item => {
                    this.allAmount += item.amount
                })
            },

            //发药
            queryAll(){
                if (!this.careHistory.regId) {
                    this.$message('请输入挂号单ID查询')
                    return
                } else if (this.itemObjs.length === 0) {
                    this.$message('请选择要发药的药品名')
                    return
                } else {
                    // 组装数据
                    const itemIds = this.itemObjs.map(item => item.itemId)
                    // 发送请求
                    this.loading = true
                    this.loadingText = '发药中。。。'
                    this.$confirm('是否确定发药?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$axios.post('/charge/api/Dispense',itemIds).then(res => {
                            this.msgSuccess('全部药品发放成功')
                            this.resetCurrentParams();
                            this.loading = false
                        }).catch(() => {
                            this.$message('发放失败原因：看右上角')
                            this.loading = false
                        })
                    }).catch(() => {
                        this.$message('发药已取消')
                        this.loading = false
                    })
                }
            },


            // 全选择
            handleSelectAll() { // 先取消再反选择
                this.allAmount=0;
                const tables = this.$refs.refTable
                tables.filter(t => {
                    t.clearSelection()
                    t.toggleAllSelection() // 注意不要用错方法了
                })
            },
            // 取消全选
            handleUnSelectAll() {
                const tables = this.$refs.refTable
                tables.filter(t => {
                    t.clearSelection()
                })
            },
            resetCurrentParams() {
                this.careHistory = {}
                this.careOrderItem = []
            },

        },

    }
</script>

<style scoped>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
